<!DOCTYPE html>
<html lang="zh-hans">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<title>前端-张宣瓯</title>
	<meta name="keywords" content="张宣瓯,前端,简历,求职,resume,job,web,html,html5,css,css3,javascript">
	<meta name="description" content="张宣瓯的个人简历">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<link href="./common/main.css" media="not print" rel="stylesheet" type="text/css">
	<link rel="icon" href="images/zhang-icon.png">
	<style>
		.ie-updater-layer {
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			height: 100%;
			background-color: #000;
			filter: alpha(opacity=50);
			opacity: .5;
			z-index: 99999999;
		}

		.ie-updater-box {
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -292px;
			margin-top: -210px;
			width: 584px;
			height: 420px;
			background: url(coding/demo/images/pic/IE9.png) no-repeat;
			z-index: 100000000;
		}

		.ie-updater-box a {
			position: absolute;
			text-decoration: none;
			color: #71a403;
			font-size: 14px;
			width: 130px;
			height: 32px;
			background-color: #FFF;
			text-align: center;
			line-height: 32px;
		}

		.ie-updater-box a:hover {
			color: #ff4400;
		}
	</style>

<body>
	<!--[if lt IE 9]>
<style>html,body{overflow:hidden;height:100%}</style>
<div class="ie-updater-layer"></div>
<div class="ie-updater-box"> 	
  	<a href="http://chrome.360.cn/" target="_blank" style="left: 55px;top: 107px;">360极速浏览器</a>
  	<a href="https://www.google.cn/intl/zh-CN/chrome/browser/desktop/" target="_blank" style="left: 212px;top: 107px;" title="Chrome需翻墙下载">谷歌 Chrome</a>
  	<a href="http://se.360.cn/" target="_blank" style="left: 55px;top: 167px;">360安全浏览器</a>
  	<a href="http://ie.sogou.com/" target="_blank" style="left: 212px;top: 167px;">搜狗浏览器</a>
  	<a href="http://browser.qq.com/" target="_blank" style="left: 55px;top: 227px;">QQ 浏览器</a>
  	<a href="http://www.firefox.com.cn/" target="_blank" style="left: 212px;top: 227px;">火狐浏览器</a>
  	<a href="http://www.uc.cn/ucbrowser/download/" target="_blank" style="left: 55px;top: 287px;">UC 浏览器</a>
  	<a href="https://support.microsoft.com/zh-cn/help/17621/internet-explorer-downloads" target="_blank" style="left: 212px;top: 287px;">IE 9+</a>
</div>
<![endif]-->
	<header class="header">
		<div class="boundary clearfix">
			<h1 class="header__logo">
				<span class="header__logo__fullname">张宣瓯</span><span class="header__logo__jobtitle">Web前端</span>
			</h1>
			<address class="header__address">
				<ul class="clearfix">
					<li id="header__address__item-phone" class="header__address__item header__address__item-phone" style="display: none;">
						<script>
							if (window.atob) { document.write(window.atob('MTM1NjAzMjgxMDY=')); }
							if (/[?&]show-mobile-no=true(&|$)/.test(window.location.search)) {
								document.getElementById('header__address__item-phone').style.display = '';
							}
						</script>15067852670</li>
					<li class="header__address__item header__address__item-qq">597045211</li>
					<li class="header__address__item header__address__item-email">597045211@qq.com</li>
					<li class="header__address__item header__address__item-blog">
						<a class="button" href="https://gitee.com/zhangxuanou" target="_blank">码云</a>
					</li>
				</ul>
			</address>
		</div>
	</header>

	<div class="main">
		<section class="section">
			<div class="boundary">
				<header class="section__header">
					<h2 class="section__header__title">熟悉前端，涉猎后端</h2>
					<h3 class="section__header__subtitle">
						<script>document.write((new Date).getFullYear() - 2017);</script>年工作经验</h3>
				</header>
				<div class="section-body">
					<ul class="tech-skill-list">
						<li class="tech-skill-list__item tech-skill-list__item-javascript tech-skill-list__item--mastered">
							<h4 class="tech-skill-list__item__name">HTML &amp; CSS</h4>
							<div class="tech-skill-list__item__detail not-for-print fade">
								<ul class="list content">
									<li>能使用合理的结构和样式编写兼容主流浏览器的页面；</li>
									<li>能适当运用CSS 3使页面在现代浏览器上效果更佳；</li>
									<li>能熟练运用REM单位实现不同浏览器宽度下的整页缩放；</li>
									<li>能熟练使用Chrome开发者工具、Fiddler等工具辅助开发。</li>
								</ul>
							</div>
						</li>
						<li class="tech-skill-list__item tech-skill-list__item-html-and-css tech-skill-list__item--mastered">
							<h4 class="tech-skill-list__item__name">Javascript</h4>
							<div class="tech-skill-list__item__detail not-for-print fade">
								<ul class="list content">
									<li>熟练使用jQuery库。</li>
								</ul>
							</div>
						</li>
						<li class="tech-skill-list__item tech-skill-list__item-nodejs tech-skill-list__item--practised">
							<h4 class="tech-skill-list__item__name">Less</h4>
							<div class="tech-skill-list__item__detail not-for-print fade">
								<ul class="list content">
									<li>熟练使用Less编写样式</li>
								</ul>
							</div>
						</li>
						<li class="tech-skill-list__item tech-skill-list__item-aspdotnet tech-skill-list__item--practised">
							<h4 class="tech-skill-list__item__name">avalon.js</h4>
							<div class="tech-skill-list__item__detail not-for-print fade">
								<ul class="list content">
									<li>数据交互</li>
								</ul>
							</div>
						</li>
						<li class="tech-skill-list__item tech-skill-list__item-aspdotnet tech-skill-list__item--practised">
							<h4 class="tech-skill-list__item__name">vue.js</h4>
							<div class="tech-skill-list__item__detail not-for-print fade">
								<ul class="list content">
									<li>数据交互</li>
								</ul>
							</div>
						</li>
						<li class="tech-skill-list__item tech-skill-list__item-sql tech-skill-list__item--practised">
							<h4 class="tech-skill-list__item__name">Photoshop</h4>
							<div class="tech-skill-list__item__detail not-for-print fade">
								<ul class="list content">
									<li>精通PS</li>
									<li>能设计页面</li>
								</ul>
							</div>
						</li>
						<li class="tech-skill-list__item tech-skill-list__item-photoshop">
							<h4 class="tech-skill-list__item__name">node</h4>
							<div class="tech-skill-list__item__detail not-for-print fade">
								<ul class="list content">
									<li>能连接mysql和mongodb数据库进行增删改查操作</li>
								</ul>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</section>

		<section class="section">
			<div class="boundary">
				<header class="section__header">
					<h2 class="section__header__title">对Web充满热情</h2>
					<h3 class="section__header__subtitle">大学时期踏上开发之路</h3>
				</header>
				<div class="section-body clearfix">
					<div class="edu edu-university">
						<div class="edu__body clearfix">
							<a href="http://www.wzvcst.cn/" class="university_info_img" target="_blank">
								<img src="images/jzy_logo.jpg" alt="温州科技职业学院" class="edu__logo">
							</a>
							<p class="content">2014年9月在温州科技职业学院就读，所读专业为软件技术，在校表现良好。</p>
							<ul class="list content">
								<li>大一下半学期，因期末作业制作了一个学校内部订餐系统</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section class="section">
			<div class="boundary">
				<header class="section__header">
					<h2 class="section__header__title">工作经历</h2>
					<h3 class="section__header__subtitle">有整站网站开发经验</h3>
				</header>
				<div class="section-body">
					<div class="work-exp-list">
						<div class="work-exp-list__point"><i class="work-exp-list__point__ico"></i>至今</div>
						<section class="work-exp-list__company clearfix">
							<header class="work-exp-list__company__header">
								<a href="javascript:;" target="_blank" class="work-exp-list__company__header__logo"><img src="images/WFlogo.png"
									 alt="温州专帮信息科技有限公司"></a>
								<h4 class="work-exp-list__company__header__title">
									<a style="color: #3a76e7;" href="http://www.163.gg/" target="_blank">温州专帮信息科技有限公司</a>
								</h4>
								<p class="work-exp-list__company__header__jobtitle">前端开发工程师</p>
							</header>
							<div class="work-exp-list__company__body content">
								<p>工作主要负责PC端和移动端的页面,移动端主要是一些H5活动页面,再加数据交互工作。</p>
							</div>
						</section>
						<div class="work-exp-list__point"><i class="work-exp-list__point__ico"></i>2017/10</div>
						<section class="work-exp-list__company clearfix">
							<header class="work-exp-list__company__header">
								<a href="http://www.1t520.com/" target="_blank" class="work-exp-list__company__header__logo"><img src="images/MGClogo1.png"
									 alt="中优国际"></a>
								<h4 class="work-exp-list__company__header__title">
									<a style="color: #21b1ef;" href="http://www.chinaso.biz/" target="_blank">一团平台</a>
								</h4>
								<p class="work-exp-list__company__header__jobtitle">UI设计师</p>
							</header>
							<div class="work-exp-list__company__body content">
								<p>工作主要负责设计页面</p>
							</div>
						</section>
						<div class="work-exp-list__point"><i class="work-exp-list__point__ico"></i>2016/10</div>
						<section class="work-exp-list__company clearfix">
							<header class="work-exp-list__company__header">
								<a href="http://www.baidusoso.cc/about/company.html" target="_blank" class="work-exp-list__company__header__logo"><img
									 src="images/WZlogo1.png" alt="温州伟瑞科技有限公司"></a>
								<h4 class="work-exp-list__company__header__title">
									<a style="color: #000;" href="http://www.baidusoso.cc/about/company.html" target="_blank">温州伟瑞科技有限公司</a>
								</h4>
								<p class="work-exp-list__company__header__jobtitle">前端</p>
							</header>
							<div class="work-exp-list__company__body content">
								实习工作。工作主要负责PC端和移动端的页面和JS交互。
							</div>
						</section>
					</div>
				</div>
			</div>
		</section>

		<section class="section">
			<div class="boundary">
				<header class="section__header">
					<h2 class="section__header__title">项目经验</h2>
					<h3 class="section__header__subtitle">业余项目与公司项目相互促进</h3>
				</header>
				<div class="section-body">
					<section class="project clearfix">
						<div class="project__intro">
							<header class="project__intro__header clearfix">
								<h4 class="project__intro__header__title">网付</h4>
								<ul class="tech-tag-list not-for-print">
									<li class="tech-tag-list__item tech-tag-list__item-javascript">HTML</li>
									<li class="tech-tag-list__item tech-tag-list__item-nodejs">Javascript</li>
								</ul>
								<p class="project__intro__header__period">2018-4-02</p>
							</header>
							<div class="content">
								<p>网站页面制作，数据展示，后台前端逻辑采用avalon.js</p>
								<p class="project__intro__links not-for-print">
									<a href="http://www.163.gg/">网站地址</a>
								</p>
							</div>
						</div>
						<div class="project__thumb not-for-print">
							<img src="./images/wangfu-img.png" alt="网付">
						</div>
					</section>
					<section class="project clearfix">
						<div class="project__intro">
							<header class="project__intro__header clearfix">
								<h4 class="project__intro__header__title">席风卫浴</h4>
								<ul class="tech-tag-list not-for-print">
									<li class="tech-tag-list__item tech-tag-list__item-javascript">HTML</li>
									<li class="tech-tag-list__item tech-tag-list__item-nodejs">Javascript</li>
									<li class="tech-tag-list__item tech-tag-list__item-vuejs">avalon.js</li>
								</ul>
								<p class="project__intro__header__period">2018-08-06</p>
							</header>
							<div class="content">
								<p>网站页面制作，数据展示，后台前端逻辑采用avalon.js</p>
								<p class="project__intro__links not-for-print">
									<a href="http://www.xifengwy.com/" target="_blank">网站地址</a>
								</p>
							</div>
						</div>
						<div class="project__thumb not-for-print">
							<img src="./images/xfwy.png" alt="蓝狐展览">
						</div>
					</section>
					<section class="project clearfix">
						<div class="project__intro">
							<header class="project__intro__header clearfix">
								<h4 class="project__intro__header__title">微店购物</h4>
								<ul class="tech-tag-list not-for-print">
									<li class="tech-tag-list__item tech-tag-list__item-javascript">HTML</li>
									<li class="tech-tag-list__item tech-tag-list__item-nodejs">Javascript</li>
									<li class="tech-tag-list__item tech-tag-list__item-vuejs">avalon.js</li>
								</ul>
								<p class="project__intro__header__period">2018-6-02</p>
							</header>
							<div class="content">
								<p>网站页面制作，数据展示，后台前端逻辑采用avalon.js</p>
								<p class="project__intro__links not-for-print">
									<a href="http://www.weidian.gg/">网站地址</a>
								</p>
							</div>
						</div>
						<div class="project__thumb not-for-print">
							<img src="./images/wdgw.png" alt="微店购物">
						</div>
					</section>
					<section class="project clearfix">
						<div class="project__intro">
							<header class="project__intro__header clearfix">
								<h4 class="project__intro__header__title">北橙策略（响应式）</h4>
								<ul class="tech-tag-list not-for-print">
									<li class="tech-tag-list__item tech-tag-list__item-javascript">HTML</li>
									<li class="tech-tag-list__item tech-tag-list__item-nodejs">Javascript</li>
									<li class="tech-tag-list__item tech-tag-list__item-vuejs">Vue.js</li>
								</ul>
								<p class="project__intro__header__period">2017-09-24</p>
							</header>
							<div class="content">
								<p>网站页面制作，数据展示，后台前端逻辑采用Vue.js</p>
								<p class="project__intro__links not-for-print">
									<a href="http://www.becechina.com/" target="_blank">网站地址</a>
								</p>
							</div>
						</div>
						<div class="project__thumb not-for-print">
							<img src="images/bece.png" alt="北橙策略">
						</div>
					</section>
				</div>
			</div>
		</section>
		<section class="section">
			<div class="boundary">
				<header class="section__header">
					<h2 class="section__header__title">练手仓库</h2>
					<h3 class="section__header__subtitle">各种练手的小例子</h3>
				</header>
				<div class="section-body">
					<section class="project clearfix">
						<div class="project__intro">
							<header class="project__intro__header clearfix">
								<h4 class="project__intro__header__title">练手仓库</h4>
								<ul class="tech-tag-list not-for-print">
									<li class="tech-tag-list__item tech-tag-list__item-javascript">HTML</li>
									<li class="tech-tag-list__item tech-tag-list__item-nodejs">Javascript</li>
									<li class="tech-tag-list__item tech-tag-list__item-jquery">jQuery</li>
									<li class="tech-tag-list__item tech-tag-list__item-canvas">Canvas</li>
									<li class="tech-tag-list__item tech-tag-list__item-vuejs">Vue.js</li>
								</ul>
								<p class="project__intro__header__period">2017-04-29</p>
							</header>
							<div class="content">
								<p>各种练手的小例子</p>
								<p class="project__intro__links not-for-print">
									<a href="hand.html" target="_blank">项目地址</a>
								</p>
							</div>
						</div>
						<div class="project__thumb not-for-print">
							<img src="images/demo.png" alt="各种练手的小例子">
						</div>
					</section>
				</div>
			</div>
		</section>
	</div>

	<footer class="footer">
		<div class="boundary clearfix">
			<div class="footer__qrcode clearfix">
				<img src="images/or_code.png" alt="二维码" class="footer__qrcode__img">
				<p class="footer__qrcode__text content">您还可以使用手机或iPad<br>扫描左侧二维码打开本页</p>
			</div>
			<div class="footer__copyright content">
				<p>最后更新于2017年4月29日</p>
				<p>简历模板由 <a href="http://heeroluo.net/" target="_blank">Heero.Luo</a> 设计开发 (使用本模板请注明此项)</p>
			</div>
		</div>
	</footer>

</body>

</html>